<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavBar
                title="故障分布"
                @click-left="$router.go(-1)"
        ></indexNavBar>
        <div class="report-card">
            <div class="report-card-content">
                <div id="fault"></div>
            </div>
        </div>
    </div>
</template>

<script>
import indexNavBar from '@/components/style/index-nav-bar.vue'

    export default {
        name: 'FaultDistribution',
        components: {
            indexNavBar
        },
        data () {
            return {
                queryParameter: {},
                chart: null
            }
        },
        created () {

        },
        mounted () {
            this.hideItem()
            this.queryParameter = this.$route.query.queryParameter
            this.$nextTick(() => {
                this.initChart()
            })
        },
        methods: {
            async initChart () {
                this.chart = this.$echarts.init(document.getElementById('fault'))
                // let color = []
                /**/
                const { data: res } = await this.$H.post(this, this.$A.reportIndex.count, this.queryParameter)
                let resdt = res.filter(item => { return item.tmnlErrorDesc != '' })
                console.log('resdt', resdt)
                /**/
                let data = []
                let legendData = []
                let errorCount = 0
                for (let i in resdt) {
                    data.push({ name: resdt[i].tmnlErrorDesc.toString(), value: resdt[i].count })
                    legendData.push(resdt[i].tmnlErrorDesc)
                    errorCount = errorCount + resdt[i].count
                }
                console.log('echart所需', data, legendData, errorCount)
                /* 自适应高度 */
                let autoHeight = data.length * 26 + 280
                this.chart.resize({ height: autoHeight })
                /* */
                this.chart.setOption({
                    // color: color,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        itemWidth: 26,
                        itemHeight: 13,
                        borderRadius: 20,
                        left: 'center',
                        top: '260',
                        icon: 'roundRect',
                        data: legendData,
                        formatter: function (name) {
                            let val
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].name === name) {
                                    val = data[i].value
                                }
                            }
                            let arr = [
                                '{a|' + name + '}{b|' + val + '}'
                            ]
                            return arr.join('\n')
                        },
                        textStyle: {
                            rich: {
                                a: {
                                    verticalAlign: 'right',
                                    fontSize: 12,
                                    align: 'left',
                                    width: 200
                                },
                                b: {
                                    fontSize: 12,
                                    align: 'left',
                                    width: 50
                                }
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    series: [
                        {
                            name: '故障分布',
                            type: 'pie',
                            radius: [60, 96],
                            center: ['50%', '110'],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    color: '#4c4a4a',
                                    formatter: '{total|' + errorCount + '}' + '\n\r' + '{active|共计故障}',
                                    rich: {
                                        total: {
                                            fontSize: 28,
                                            fontFamily: '微软雅黑',
                                            color: '#454c5c'
                                        },
                                        active: {
                                            fontFamily: '微软雅黑',
                                            fontSize: 16,
                                            color: '#6c7a89',
                                            lineHeight: 30
                                        }
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            },
                            data: data,
                            animationDuration: 1800
                        }
                    ]
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import 'index.less';
</style>
